<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <ClassifyTree  @select="handleSelect" />
    <BasicTable @register="registerTable" style="flex: 1;overflow: hidden;" :searchInfo="searchInfo">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">添加参数</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
:actions="[
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              tooltip: '删除',
              popConfirm: {
                title: '是否确认删除',
                placement: 'left',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]" />
        </template>
      </template>
    </BasicTable>
    <ClassifyModal @register="registerModal" @success="handleSuccess" :searchInfo="searchInfo" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getClassifyDevice } from '@/api/collection/classify'
import { PageWrapper } from '@/components/Page';
import ClassifyTree from './ClassifyTree.vue';
import { useModal } from '@/components/Modal';
import ClassifyModal from './ClassifyModal.vue';
import { columns, searchFormSchema } from './classify.data';
import { deleteClassifyDevice } from '@/api/collection/classify/index';

defineOptions({ name: 'ClassifyManage' });
const [registerModal, { openModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const [registerTable, { reload, updateTableDataRecord, setPagination }] = useTable({
  title: '数据列表',
  api: getClassifyDevice,
  rowKey: 'id',
  columns,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
    autoSubmitOnEnter: true,
  },
  useSearchForm: true,
  showTableSetting: false,
  bordered: true,
  handleSearchInfoFn(info) {
    console.log('handleSearchInfoFn', info);
    return info;
  },
  actionColumn: {
    width: 120,
    title: '操作',
    dataIndex: 'action',
    // slots: { customRender: 'action' },
  },
});

function handleCreate() {
  openModal(true, {
    isUpdate: false,
  });
}

function handleEdit(record: Recordable) {
  console.log(record);
  openModal(true, {
    record,
    isUpdate: true,
  });
}

async function handleDelete(record: Recordable) {
  await deleteClassifyDevice(record)
  reload()
}

function handleSuccess({ isUpdate, values }) {
  if (isUpdate) {
    // 演示不刷新表格直接更新内部数据。
    // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
    const result = updateTableDataRecord(values.id, values);
    // console.log(result);
  } else {
    reload();
  }
}

function handleSelect(classifyId = '') {
  // console.log(classifyId, '....');
  searchInfo.classifyId = classifyId;
  setPagination({ current: 1 })
  reload();
}

</script>
